<script setup lang="ts">
  import { Button, ButtonProps } from '@arco-design/web-vue';
  import { computed } from 'vue';

  type PurposeType = 'save' | 'add' | 'edit' | 'view' | 'delete' | 'cancel';

  interface MyButtonProps extends /* @vue-ignore */ ButtonProps {
    purpose?: PurposeType;
    loading?: boolean;
    icon?: boolean;
  }

  const props = withDefaults(defineProps<MyButtonProps>(), {
    loading: false,
    purpose: 'add',
    icon: true,
  });

  type StyleProps = {
    type?: ButtonProps['type'];
    status?: ButtonProps['status'];
    icon?: string;
  };

  /**
   *
   * <a-button type="primary">主要按钮</a-button>
      <a-button>不重要操作</a-button>
      <a-button status="danger">危险操作</a-button>
      <a-divider direction="vertical" />
      <a-button type="dashed">查看</a-button>
      <a-button type="outline">编辑</a-button>
      <a-divider direction="vertical" />
      <a-button status="success" type="dashed">提交</a-button>
      <a-button status="warning" type="dashed">取消（带逻辑）</a-button>
      <a-button>关闭</a-button>
   */

  const styleMap: Record<PurposeType, StyleProps> = {
    add: {
      type: 'primary',
      icon: 'icon-plus',
    },
    delete: {
      icon: 'icon-delete',
    },
    view: {
      type: 'text',
    },
    edit: {
      type: 'primary',
      icon: 'icon-edit',
    },
    cancel: {
      icon: 'icon-close-circle',
    },
    save: {
      type: 'primary',
      icon: 'icon-save',
    },
  };

  const allType = Object.keys(styleMap) as PurposeType[];

  const styleType = computed(() => {
    if (!allType.includes(props.purpose)) {
      return styleMap.add;
    }
    return styleMap[props.purpose];
  });
</script>

<template>
  <Button
    v-bind="$attrs"
    :loading="loading"
    :type="styleType.type"
    :status="styleType.status"
  >
    <template v-if="icon" #icon>
      <slot name="icon">
        <component :is="styleType.icon" />
      </slot>
    </template>
    <slot />
  </Button>
</template>
